<script setup>
import { ref } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'
import { getInfoApi, logoutApi } from '@/apis/user'
import { route, toast } from 'uview-plus'
import { useCartStore } from '@/store'
const cartStore = useCartStore()
const userInfo = ref({
  id: null,
  nickName: '',
  username: '',
  introduceSign: ''
})
const getUserInfo = async () => {
  const res = await getInfoApi()
  userInfo.value = res.data.data
}

const token = uni.getStorageSync('token')
onShow(() => {
  getUserInfo()
  if (token) {
    cartStore.getCount()
  }
})

// 修改用户信息
const onClickUserInfo = () => {
  route({
    url: '/pages/user/user-info',
    type: 'to'
  })
}

const onLogout = () => {
  uni.showModal({
    title: '确定注销吗？',
    success: async (res) => {
      if (res.confirm) {
        await logoutApi()
        toast('注销成功')
        // userStore.setToken('')
        uni.removeStorage({
          key: 'token'
        })
        route({
          url: '/pages/user/login',
          type: 'to'
        })
      }
    }
  })
}



</script>

<template>
  <view class="page">
    <view class="nav">
      <up-navbar leftIcon="" :placeholder="true" border :autoBack="true" title="我的" rightIcon="more-dot-fill">
      </up-navbar>
    </view>
    <view class="content">
      <view class="user-info">
        <view class="user-info-box" @click="onClickUserInfo">
          <up-image src="/static/images/my.png" shape="circle" width="80px" height="80px"></up-image>
          <view class="info">
            <view class="nickName">
              <up-text color="#fff" :lines="1" :text="`昵称：${userInfo.nickName || userInfo.username}`"></up-text>
            </view>
            <view class="username">用户名：{{ userInfo.username }}</view>
            <view class="introduce_sign">
              <up-text color="#fff" :lines="1" :text="`个性签名：${userInfo.introduceSign || '无'}`"></up-text>
            </view>
          </view>
        </view>
      </view>
      <view class="select-box">
        <view class="item" @click="route({url: '/pages/order/orderList'})">
          <up-text text="我的订单"></up-text>
          <up-icon name="arrow-right"></up-icon>
        </view>
        <view class="item" @click="route({ url: '/pages/user/update-pwd' })">
          <up-text text="修改密码"></up-text>
          <up-icon name="arrow-right"></up-icon>
        </view>
        <view class="item" @click="route({ url: '/pages/address/index' })">
          <up-text text="地址管理"></up-text>
          <up-icon name="arrow-right"></up-icon>
        </view>
        <view class="item">
          <up-text text="关于我们"></up-text>
          <up-icon name="arrow-right"></up-icon>
        </view>
      </view>
    </view>

    <view class="logout-box">
      <up-button text="注销" @click="onLogout" class="but" type="error" :plain="true" shape="circle"></up-button>
    </view>

  </view>



</template>
<style lang="scss" scoped>
.page {

  .content {


    .user-info {
      padding: .3rem;

      .user-info-box {
        display: flex;
        align-items: center;
        padding-left: 1.5rem;
        padding-right: 2rem;
        height: 7.5rem;
        background-image: linear-gradient(to right, #55A8A2, #6ABEBF);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        border-radius: .3rem;

        .info {
          padding-left: 1rem;
          color: #fff;
        }
      }
    }

    .select-box {
      padding: 1rem .3rem;
      height: 20rem;

      .item {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        padding: 1rem 0;
        margin: 0 .5rem;

        // 获取最后一个元素
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }

  .logout-box {
    // 固定在底部
    position: fixed;
    display: flex;
    margin: 0 auto;
    width: 100%;
    bottom: 80rpx;

    .but {
      width: 60%;
    }
  }
}
</style>